<template>
  <div>
    <edu-dialog :title="$t('auditStandard.addTheCourse')" size="small" :visible.sync="show" :autoHeight="false"
    :confirmBtnText="$t('common.btn.confirm')" :close-on-click-modal="false" @close="close" @confirm="confirm('addCourseForm')">
    <el-form :model="formInfo" ref="addCourseForm" :rules="rules" label-width="130px" label-position="right"
      size="small">
      <el-row>
        <el-col :span="20">
          <el-form-item :label="$t('auditStandard.courseGroupName') + ':'" prop="groupInfo">
            <el-select v-model="formInfo.groupInfo" style="width: 100%" value-key="id" filterable clearable>
              <el-option v-for="item in courseGroupOptions" :key="item.key" :label="item.label" :value="item.value" :placeholder="$t('common.pla.pleaseSelect')">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="20">
          <el-form-item :label="$t('auditStandard.courseGroupCredits') + ':'">
            <el-input :value="formInfo.groupInfo && formInfo.groupInfo.credits || ''" :disabled="true" style="width: 100%;"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="20">
          <el-form-item :label="$t('auditStandard.addTheCourse') + ':'">
            <el-select v-model="formInfo.courseInfo" filterable  remote :remote-method="getCoureseList" :loading="loading"  
              :placeholder="$t('common.pla.pleaseSelect')" style="width: 245px;" value-key="code">
              <el-option
                v-for="item in courseOptions"
                :key="item.key"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
            <el-button @click="addToTable" type="primary" class="float-right">{{$t("message.add1")}}</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div style="margin-top: 14px" v-if="addCourseTableData.length">
      <div class="edu-page-title" style="margin-bottom: 20px;">{{$t("auditStandard.courseAdded")}}</div>
      <edu-table :data="addCourseTableData" :order="false" :pagination="false" border :selection="false"
        :stripe="false" style="width: 100%;">
        <edu-table-column align="center" :label="$t('auditStandard.courseTitle')" prop="name"></edu-table-column>
        <edu-table-column align="center" :label="$t('auditStandard.courseID')" prop="code"></edu-table-column>
        <edu-table-column align="center" :label="$t('auditStandard.startCollege')" prop="collegeI18n"></edu-table-column>
        <edu-table-column align="center" :label="$t('auditStandard.courseCredits')" prop="credits"></edu-table-column>
        <edu-table-column align="center" :label="$t('common.text.operation')">
          <template slot-scope="scope">
            <el-button type="text" size="mini" @click.stop="operate(scope.$index)">{{$t('common.btn.delete')}}</el-button>
          </template>
        </edu-table-column>
      </edu-table>
    </div>
    </edu-dialog>
  </div>
</template>
<script>
  import {getCourseGroupList, getCourese, addCourse} from 'common/src/api/graduationManagement/interStudentManage';
  export default {
    props: {
      show: {
        type: Boolean,
        default: false
      },
      condition: {
        type: Object,
        default: {}
      }
    },
    data() {
      return {
        formInfo: {
          groupInfo: '',
          credits: '',
          courseInfo: ''
        },
        courseGroupOptions: [],
        courseOptions: [],
        loading: false,
        rules: {
          groupInfo: [{
            required: true,
            message: this.$t('auditStandard.validCourseGroupName')
          }]
        },
        addCourseTableData: []
      }
    },
    created() {
      this.initCourseGroupOption();
      this.getCoureseList('', true);
    },
    methods: {
      initCourseGroupOption() {
        let params = {
          ...this.condition
        };
        getCourseGroupList(params).then(res => {
          if (res && res.code === 200) {
            let options = [];
            let data = res.data || [];
            data.forEach(item => {
              options.push({
                key: item.id,
                label: item.groupName,
                value: item
              })
            });
            this.courseGroupOptions = options;
          }
        }).catch(() =>{
          this.courseGroupOptions = [];
        });
      },
      confirm(name) {
        this.$refs[name].validate((valid) => {
          if (valid) {
            this.ok();
          } else {
            return false;
          }
        });
      },
      close() {
        this.$emit('update:show', false);
      },
      ok() {
        let params = {
          ...this.condition,
          id: this.formInfo.groupInfo.id, 
          internationalCourseList: []
        };
        if (!this.addCourseTableData.length) {
          this.$message({
            message: this.$t('auditStandard.selectAddCourseTip'),
            type: 'warning'
          });
          return;
        }
        this.addCourseTableData.forEach(item => {
          params.internationalCourseList.push({
            courseCode: item.code,
            courseName: item.name,
            college: item.college,
            credits: item.credits
          })
            
        });
        addCourse(params).then(res =>{
          if (res && res.code === 200) {
            this.$message({
              message: this.$t('auditStandard.addCourseSuccessTip'),
              type: 'success'
            });
            this.$parent.getStandard && this.$parent.getStandard();
            this.$emit('update:show', false);
          }
        }).catch((error)=>{
          if (error && error.message) {
            this.$message({
              message: error.message,
              type: 'error'
            });
          }
        })
      },
      getCoureseList(val, initFlag) {
        if (val || initFlag) {
          this.loading = true;
          getCourese({
            condition: val,
            pageNum_: 1,
            pageSize_: 20
          }).then(res =>{
            this.loading = false;
            if (res && res.code === 200) {
              let list = res.data && res.data.list || [];
              let options = [];
              list.forEach((item, index) =>{
                options.push({
                  key: index,
                  label: `${item.name}(${item.code})`,
                  value: item
                })
              })
              this.courseOptions = options;
              initFlag && (this.initSelectOptions = options);
            }
          }).catch(() =>{
            this.loading = false;
            this.courseOptions = [];
          })
        }else {
          this.courseOptions = this.initSelectOptions || [];
        }
      },
      addToTable() {
        if (this.formInfo.courseInfo) {
          let isExit = this.addCourseTableData.find(item => {
            return item.code === this.formInfo.courseInfo.code;
          });
          if (isExit) {
            this.$message({
              message: this.$t('auditStandard.validAddCourseTip'),
              type: 'error'
            });
            return;
          }
          this.addCourseTableData.push(this.formInfo.courseInfo);
        }
      },
      operate(index) {
        this.addCourseTableData.splice(index, 1);
      }
    }
  }


</script>